<template>
  <div class="orderHeader">
    <div class="header">
      <div class="container">
        <div class="box">
          <div class="header-logo">
            <router-link to="/" class="logo"></router-link>
          </div>
          <div class="title">
            <span class="h3">{{title}}</span>
            <slot name="tishi"></slot>
          </div>
          <div class="user">
            <el-dropdown @command="handleCommand">
              <a href="#">jack<i class="el-icon-arrow-down el-icon--right"></i></a>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="1">
                  订单列表
                </el-dropdown-item>
                <el-dropdown-item command="2">退出登入</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'orderHeader',
  props: ['title'],
  methods: {
    handleCommand(command) {
      if (command === '1') {
        this.$router.push('/orderlist')
      } else {
        this.$store.dispatch('logout')
        this.$router.push('/')
      }
    }
  }
}
</script>

<style lang="scss">
.orderHeader {
  .header {
    width: 100%;
    height: 100px;
    border-bottom: 2px solid #ff6700;
    .box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100px;
      .header-logo {
        overflow: hidden;
        width: 55px;
        height: 55px;
        background-color: #ff6600;
        margin-right: 50px;
        .logo {
          display: inline-block;
          width: 110px;
          height: 55px;
          transition: all 0.3s;
          &::before {
            content: ' ';
            display: inline-block;
            width: 55px;
            height: 55px;
            background: url('../../../public/imgs/mi-logo.png') no-repeat center;
            background-size: contain;
          }
          &::after {
            content: ' ';
            display: inline-block;
            width: 55px;
            height: 55px;
            background: url('../../../public/imgs/mi-home.png') no-repeat center;
            background-size: contain;
          }
          &:hover {
            margin-left: -55px;
          }
        }
      }
      .title {
        margin-left: -610px;
        .h3 {
          font-size: 28px;
          margin-right: 15px;
          color: black;
        }
        span {
          color: #ccc;
        }
      }
      .user {
        a {
          font-size: 16px;
          color: black;
          &:hover {
            color: #ff6600;
          }
          span {
            display: inline-block;
            width: 12px;
            height: 12px;
            background: url('../../../public/imgs/icon-down.png') no-repeat center;
            background-size: contain;
            vertical-align: middle;
            margin-left: 5px;
          }
        }
      }
    }
  }
  .color {
    color: black;
  }
}
</style>
